<template>
    <div class="stulist">
        <el-form :inline="true" size="small" :model="formInline">
            <el-form-item label="学生姓名">
                <el-input v-model="formInline.userName" placeholder="请输入" clearable style="width: 130px;" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>

        </el-form>
        <!-- 分割线 -->
        <div class="left_content_line"></div>

        <!-- 数据 -->
        <div class="dateList" v-infinite-scroll="load" style="overflow: auto" v-loading="loading">
            <template v-for="item in stulist" :key="item.id">
                <div class="dateItem" @click="chooseStudent(item)">
                    <div class="img">
                        <img :src="item.avatarUrl" alt="">
                    </div>
                    <div class="name">{{ item.userName }}</div>
                    <!-- 选择的icon -->
                    <div class="choose_icon" v-if="props.student.id == item.id">
                        <el-icon color="#7FFF00" size="20">
                            <CircleCheck />
                        </el-icon>
                    </div>
                </div>
                <div class="left_content_line"></div>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue"

const props = defineProps(['student'])
const emit = defineEmits(['update:student'])

import useUserInfo from "store/useUserInfo.js";
const useUserInfoStore = useUserInfo();
import { storeToRefs } from 'pinia'
const { userInfo } = storeToRefs(useUserInfoStore)

import { queryStudentListApi, teacherListApi, queryUserListApi } from "@/api/index";
import { ElMessage } from "element-plus";

const stulist = ref([])
const load = () => {
    if (stulist.value.length >= 25) {
        return
    }
}
const formInline = reactive({
    userName: '',
})
const loading = ref(false)
// 获取学生列表
const queryStudentList = async () => {
    loading.value = true;
    const params = {
        id: userInfo.value.userId,
    }
    if (formInline.userName != '' && formInline.userName != null) {
        params.userName = formInline.userName
    }
    let res = null
    if (userInfo.value.roleType == 1) {
        res = await queryStudentListApi(params);
    } else if (userInfo.value.roleType == 0) {
        const _params = {
            pageNum: 1,
            pageSize: 1000,
        };
        formInline.userName ? _params.userName = formInline.userName : '';
        res = await queryUserListApi(_params);
    }
    else {
        res = await teacherListApi(params);
    }
    loading.value = false;
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    stulist.value = res.data.list ? res.data.list : res.data;
}

// 选择学生
const chooseStudent = (item) => {
    console.log(item, 0);
    emit('update:student', item)
}

onMounted(() => {
    queryStudentList()
})
const onSubmit = () => {
    queryStudentList()
}

</script>

<style lang="scss" scoped>
.stulist {
    background-color: #fff;
    height: 100%;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 12px #0000001a;
}

.dateList {
    height: 94%;

    .dateItem {
        display: flex;
        align-items: center;
        padding: 10px;
        height: 70px;
        cursor: pointer;
        position: relative;

        .choose_icon {
            position: absolute;
            right: 20px;
        }

        .img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid #ccc;

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

        .name {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-left: 15px;
        }
    }
}
</style>, h